<template>
	<view class="currentStatus">
		<status-bar ref='statusbar' :title='title' back='0'></status-bar>
		<view class="contents">
			<scroll-view scroll-x="true" class="topNAVs" v-if='classify && classify.length > 0'>
				<view class="navsItem" v-for='(item,index) in classify' :key='index'>
					<navigator :url="'/otherPage/quanZ/postList?clsfid='+item.classifyid+'&classname='+item.name" hover-class="none">
						<image :src="imgUrl+item.classimg" mode="widthFix"></image>
						<view class="navsItemTitle">{{item.name}}</view>
					</navigator>
				</view>
			</scroll-view>
			<view class="textItems" v-if='postList && postList.length > 0'>
				<view class="itemsLists" v-for='(item,index) in postList' :key='index' v-if='item.file_content||item.file_img'>
					<view class="leftHeadImg">
						<image v-if='item.headimg' :src="item.headimg" mode="aspectFill"></image>
						<image v-else :src="staticUrl+'/images/jh_up/head.jpg'" mode="aspectFill"></image>
					</view>
					<view class="rightText">
						<navigator :url="'/otherPage/quanZ/postDetail?fileid='+item.file_id+'&ftvid='+item.ftvid" hover-class="none">
							<view class="username">
								<view>{{item.uname}}</view>
								<text class="thmeBg circleName" :style="{'--color': color}">{{item.classname}}</text>
							</view>
							<view class="textCont">
								{{item.file_content}}
							</view>
							<view class="ImgCont" v-if='item.file_img' :class='{
									four:item.file_img.length == 4,
									one:item.file_img.length == 1
									}'>
								<image v-for='(pic,i) in item.file_img' :key='i' :src="imgUrl+pic" mode="aspectFill" ></image>
							</view>
						</navigator>
						<view class="looks flex-box flex-between">
							<view class="leftDate">
								<text class="iconfont icon-bar_icon_shijian"></text>
								<text>{{item.addTime}}</text>
							</view>
							<view class="rightData flex-box">
								<view>
									<text class="iconfont icon-browse"></text>
									<text class="MORE" v-if='parseInt(item.watch)>999'>999</text>
									<text v-else>{{item.watch}}</text>
								</view>
								<view @click="like(index,item.file_id,item.ftvid)">
									<text v-if='item.likeFlag' class="iconfont icon-guanzhu3"></text>
									<text v-else class="iconfont icon-guanzhu1"></text>
									<text class="MORE" v-if='parseInt(item.zan)>999'>999</text>
									<text v-else>{{item.zan}}</text>
								</view>
								<view>
									<text class="iconfont icon-pinglun"></text>
									<text class="MORE" v-if='parseInt(item.pinlun)>999'>999</text>
									<text v-else>{{item.pinlun}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tabBorder" v-if='showLine'></view>
		<view class="postEnter thmeBg" :style="{'--color': color}" @click='toFt'>
			<image class="editorImg" :src="staticUrl+'/images/jh_up/icon-post1.png'"></image>
		</view>
		<empty v-if='nothing' type='1' cat='3' msg='这里空空如也 ~ <br>点击下方按钮抢个沙发吧！'></empty>
		<showModel @cancelFunc='showModal = false' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
	var that;
	export default {
		props:['title'],
		data() {
			return {
				color: getApp().globalData.color,
				ShareIsShow: false,
				showLine: true, // 是否显示tabBar的边线
				navigator: false,
				topNavHeight: 0,
				classify: '', // 分类栏目
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				postList: [], // 最新十条数据
				currIndex:0,
				page:1,
				fqvid:'',// 评论人ID
				nothing:false,
				bid: uni.getStorageSync('bid'),
				showModal:false,// 是否显示模态框
				postTitle: getApp().globalData.postConfig.postTitle
			}
		},
		onShow() {
			this.ShareIsShow = false;
			this.showModal = false;	
		},
		onLoad() {
			that = this
			that.fqvid = uni.getStorageSync("vid")
			that.getSort();
			// #ifdef H5
			this.H5Share('pageType=13','')
			// #endif
		},
		created() {
			that = this
		},
		onShareTimeline() {
			let vid = uni.getStorageSync('vid');
			let shareData = uni.getStorageSync('shareData');
			return {
				title: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=13',
				imageUrl: shareData.imageUrl
			}
		},
		onShareAppMessage(option) {
			let vid = uni.getStorageSync('vid');
			let shareData = uni.getStorageSync('shareData');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=13',
				imageUrl: shareData.imageUrl
			}
		},
		onPullDownRefresh() {
			that.postList = [];
			that.getSort();
			setTimeout(function(){  
		        uni.stopPullDownRefresh();  
		    },1000)
		},
		methods: {
			toFt(){
				let vid = uni.getStorageSync('vid')
				if(vid){
					uni.navigateTo({
						url:'/otherPage/quanZ/post'
					})
				}else{
					this.showModal = true;
				}
			},
			hideShare(e){
				this.ShareIsShow = e;
				this.showLine = true;
			},
			time(t) {
				return this.$common.timeFormat(t, 'Y.M.D h:m')
			},
			like(index,fileid,ftvid){
				var that = this;
				uni.getStorage({
					key: 'vid',
					success: function(res) {
						// 点赞操作
						that.$http.post({
							url: '/SRA_UserApp/reply',
							data: {
								bid: that.bid,
								file_id: fileid,
								fqvid: that.fqvid, // 评论人ID
								by_fqvid: ftvid, // 被评论或被点赞人ID
								review_type: 2, // 发起类型1回复，2赞,
								mubiao: 1 ,// 回复的目标 1回复的是帖子 2回复的是人
							}
						}).then(res => {
							if (res.success) {
								that.postList[index].likeFlag = true
								that.postList[index].zan +=1;
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500
								});
							}
						})
					},
					fail: function(res) {
						that.showModal = true;
					}
					
				})
			},
			getNews() {// 最新十条帖子
				that.$http.post({
					url: '/zzjApp/user_space_manage',
					data: {
						bid: that.bid,
						v_id: that.fqvid,
						pageindex: that.page,
						pagecount:10,
					}
				}).then(res => {
					var data = res.data;
					if (data) {
						data.forEach((item, index) => {
							if (item.file_img)
								item.file_img = item.file_img.split(',');
							item.likeFlag = false;
							if(item.review_type == 2 && that.fqvid){ // 已赞
								item.likeFlag = true;
							}
							item.zan = parseInt(item.zan)
						})
						that.postList = data;
						that.nothing = false;
					} else {
						that.nothing = true;
					}
					uni.hideLoading()
				})
			},
			getSort() {// 微社区内容分类
				that.$http.post({
					url: '/SRA_UserApp/classify',
					data: {
						bid: that.bid,
					}
				}).then(res => {
					if (res.data) {
						that.classify = res.data
						that.getNews()
					} else {
						that.classify = ''
						uni.showToast({
							title: '暂无分类哦',
							icon: 'none',
							duration: 1500
						});
					}
				})
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	page {
		background: white;
	}

	.topNAVs {
		width: 100%;
		height: 140rpx;
		padding: 24rpx 0;
		background: #FFFFFF;
		white-space: nowrap;
		text-align: center;
		border-bottom: 20upx solid #F5F5F5;
	}

	.navsItem {
		display: inline-block;
		padding: 0 36rpx;
		text-align: center;
	}

	.navsItem image {
		width: 86rpx;
		height: 86rpx;
		margin-bottom: 10rpx;
		display: inline-block;
	}
	.navsItemTitle {
		max-width: 200rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		color: #333333;
	}

	.shareShow {
		transform: rotate(45deg);
	}

	.shareHide {
		transform: rotate(0deg);
	}

	.templateShow {
		display: block;
	}

	.templateHeid {
		display: none;
	}

	.contents {
		overflow-x: hidden;
		overflow-y: auto;
		padding-bottom: 24upx;
		position: relative;		
	}

	.uni-page-head__title {
		text-align: center;
		height: 60upx;
		line-height: 60upx;
		font-weight: 700;
		font-size: 16px;
	}

	.action {
		font-size: 28upx;
		border-bottom: 2px solid #FF8273;
		color: #000000;
	}

	.uni-page-head__title .titles {
		margin: 0 10upx;
		display: inline-block;
	}

	.uni-page-head-bd {
		width: 100%;
		left: 0;
		right: 0;
		height: 60upx;
	}

	.backImg {
		width: 40upx;
		height: 40upx;
		position: absolute;
		left: 16upx;
		margin-top: 10upx;
	}

	.uni-page-head {
		width: 100%;
		height: 88upx;
		padding: 14upx 6upx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: relative;
		background-color: #FFFFFF;
		top: 0;
		z-index: 999;
	}

	.textItems,
	.username,
	.ImgCont,
	.looks {
		width: 100%;
	}

	.itemsLists {
		width: 100%;
		padding: 20upx;
		border-bottom: 1upx solid #F2F2F2;
		overflow: hidden;
		background: white;
	}

	.leftHeadImg {
		float: left;
	}

	.leftHeadImg image {
		width: 80upx;
		height: 80upx;
		border-radius: 100%;
	}

	.rightText {
		width: 610upx;
		float: left;
		margin-left: 20upx;
	}

	.username{
		font-weight: 700;
		font-size: 32upx;
		display: flex;
		flex-direction: row;
		  justify-content: flex-start;
		  align-items: center;
	}
	.username view{
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.username .circleName {
		float: right;
		font-size: 20upx;
		color: white;
		font-weight: normal;
		padding: 2px 12upx;
		border-radius: 40upx;
	}

	.textCont {
		margin: 20upx 0 0;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		max-height: 130upx;
	}

	.ImgCont {
		margin-top: 10upx;
		margin-right: -10upx;
	}

	.ImgCont image {
		display: inline-block;
		margin-right: 10upx;
		width: calc(33.33% - 10upx);
		height: calc(33.33vw - 54upx);
		box-sizing: border-box;
	}
	.four image:nth-child(2n){
		margin-right: 25upx;
	}
	.one image{
		width: 45vw;
		height: 55vw;
	}
	.ImgCont image:last-child {
		margin-right: 0;
	}

	.looks {
		overflow: hidden;
		margin-top: 30upx;
	}


	.leftDate text {
		margin-right: 4rpx;
		color: #999;
	}

	.rightData view{flex: 1;color: #666666;font-size: 24upx;margin-right: 20upx;display: flex;align-items: center;}
	.iconfont{
		font-size: 34rpx;
		color: #AFAFAF;
		padding-right: 4rpx;
		position: relative;
		top: 2rpx;
	}
	.icon-guanzhu3{
		color: $uni-color-star;
	}
</style>
